<template>
  <view class="pay-page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 自定义导航栏 -->
    <view class="custom-header" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="header-content">
        <view class="header-left" @click="goBack">
          <image
            class="search-icon"
            src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/back.png"
            mode="aspectFit"
          ></image>
        </view>
        <view class="header-center">
          <image
            class="logo"
            src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/logo.png"
            mode="heightFix"
          ></image>
        </view>
        <view class="header-right">
          <!-- 右侧预留空间，保持对称 -->
        </view>
      </view>
    </view>

    <!-- 支付内容 -->
    <view class="pay-content" style="padding-top: 88rpx">
      <!-- 价格显示 -->
      <view class="price-section">
        <text class="price-symbol">¥</text>
        <text class="price-amount">{{ orderAmount }}</text>
      </view>

      <!-- 倒计时 -->
      <view class="countdown-section">
        <text class="countdown-label">剩余支付时间</text>
        <view class="countdown-time">
          <view class="time-item">
            <text class="time-num">{{ formatTime(countdownTime).hours }}</text>
          </view>
          <text class="time-separator">:</text>
          <view class="time-item">
            <text class="time-num">{{
              formatTime(countdownTime).minutes
            }}</text>
          </view>
          <text class="time-separator">:</text>
          <view class="time-item">
            <text class="time-num">{{
              formatTime(countdownTime).seconds
            }}</text>
          </view>
        </view>
      </view>

      <!-- 支付方式 -->
      <view class="payment-section">
        <text class="section-title">支付方式</text>
        <view class="payment-methods">
          <view
            class="payment-item"
            :class="{ active: selectedPayment === 'wechat' }"
            @click="selectPayment('wechat')"
          >
            <view class="payment-left">
              <view class="payment-icon wechat-icon">
                <image src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/order/wechat.png" mode="widthFix"></image>
              </view>
              <text class="payment-name">微信支付</text>
            </view>
            <view class="payment-right">
                <radio value="wechat" checked color="#000" style="transform:scale(0.6)" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <view class="bottom-section">
      <button class="confirm-btn" @click="wechatPay">确认付款</button>
    </view>
  </view>
</template>

<script>
import orderApi from "@/request/order";
export default {
  data() {
    return {
      statusBarHeight: 0,
      orderAmount: "",
      countdownTime: 30 * 60, // 30分钟，以秒为单位
      selectedPayment: "wechat",
      timer: null,
      orderData: {},
      orderId: '',
    };
  },

  onLoad(options) {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;

    // 获取订单金额
    if (options.amount) {
      this.orderAmount = options.amount;
    }

    if (options.orderId) {
      this.orderId = options.orderId;
      this.orderData = JSON.parse(uni.getStorageSync(`paydata_${options.orderId}`));
      uni.removeStorageSync(`paydata_${options.orderId}`);
    }

    // 启动倒计时
    this.startCountdown();
  },

  onUnload() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 启动倒计时
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.countdownTime > 0) {
          this.countdownTime--;
        } else {
          // 倒计时结束
          clearInterval(this.timer);
          this.handleTimeOut();
        }
      }, 1000);
    },

    // 格式化时间
    formatTime(seconds) {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      const secs = seconds % 60;

      return {
        hours: hours.toString().padStart(2, "0"),
        minutes: minutes.toString().padStart(2, "0"),
        seconds: secs.toString().padStart(2, "0"),
      };
    },

    // 选择支付方式
    selectPayment(type) {
      this.selectedPayment = type;
    },

    // 倒计时结束处理
    handleTimeOut() {
      uni.showToast({
        title: "支付超时，请重新下单",
        icon: "none",
      });

      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
        });
      }, 2000);
    },


    // 微信支付
    wechatPay() {
      uni.showLoading({
        title: "支付中...",
      });

      orderApi.payOrder(this.orderData).then(res => {
        console.log(res);
        uni.requestPayment({
          provider: 'wxpay',
          appid: res.prepayId.appid,
          timeStamp: `${res.prepayId.timestamp}`,
          nonceStr: res.prepayId.noncestr,
          package: 'prepay_id=' + res.prepayId.prepayid,
          signType: 'RSA',
          paySign: res.prepayId.sign,
          partnerid: res.prepayId.partnerid,
          success: (e) => {
            console.log('e :>> ', e);
            uni.showToast({
            title: "支付成功",
            icon: "success",
            });
            uni.hideLoading();
            uni.redirectTo({
                url: "/pages/order/finish?status=success",
            });
          },
          fail: (e) => {
            console.log('fail :>> ', e);
            uni.hideLoading();
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;

  .header-content {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
  }

  .header-left {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .search-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo {
      height: 50rpx;
    }
  }

  .header-right {
    width: 60rpx;
  }
}
.pay-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.status-bar {
  background-color: #ffffff;
}

.pay-content {
  .price-section {
    background-color: #fff;
    text-align: center;
    padding-top: 100rpx;
    padding-bottom: 80rpx;

    .price-symbol {
      font-size: 64rpx;
      color: #010101;
      font-weight: bold;
    }

    .price-amount {
      font-size: 76rpx;
      color: #010101;
      font-weight: bold;
    }
  }

  .countdown-section {
    background-color: #fff;
    text-align: center;
    padding-bottom: 70rpx;

    .countdown-label {
      font-size: 28rpx;
      margin-right: 19rpx;
      color: #666666;
      margin-bottom: 30rpx;
    }

    .countdown-time {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 7rpx;

      .time-item {
        background-color: #715091;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5rpx 8rpx;
        .time-num {
          color: #ffffff;
          font-size: 19rpx;
          font-weight: bold;
        }
      }

      .time-separator {
        color: #808080;
        font-size: 32rpx;
        font-weight: bold;
      }
    }
  }

  .payment-section {
    .section-title {
      font-size: 28rpx;
      color: #000;
      padding: 0rpx 0 0 60rpx;
      margin-top: 60rpx;
    }

    .payment-methods {
      background-color: #ffffff;
      padding: 82rpx 28rpx;
      width: 680rpx;
      margin: 0 auto;
      box-sizing: border-box;
      margin-top: 26rpx;

      .payment-item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &:last-child {
          border-bottom: none;
        }
        .payment-left {
          display: flex;
          align-items: center;

          .payment-icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 24rpx;

            &.wechat-icon {
              image {
                width: 39rpx;
              }
            }
          }

          .payment-name {
            font-size: 32rpx;
            color: #333333;
          }
        }

        .payment-right {
          .radio-btn {
            width: 40rpx;
            height: 40rpx;
            border: 4rpx solid #ddd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            &.checked {
              border-color: #07c160;
              background-color: #07c160;

              .checkmark {
                color: #ffffff;
                font-size: 24rpx;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
}

.bottom-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 30rpx 0;

  .confirm-btn {
    width: 630rpx;
    height: 80rpx;
    background-color: #000000;
    color: #ffffff;
    font-size: 32rpx;
    border-radius: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
}
</style>
